<template>
  <div class="container">
    <div class=" tw-h-90 " style="font-size: 24px;color: #171920;font-weight: 700;line-height: 90px">课程讲师</div>
    <div class="flex-all-center" style="width: 1180px;">
      <div style="width: 1180px;height: auto;" class="flex-start">
        <div class="carousel-container tw-relative" @mouseover="stopCarousel" @mouseleave="startCarousel">

            <div class="tw-w-40 tw-h-40  tw-absolute tw-top-[138px] tw-left-10 -tw-mt-20 arrow flex-all-center click" @click="editIndex('cut')">
              <el-icon color="#ffffff" size="24">
                <ArrowLeft/>
              </el-icon>
            </div>
            <div class="tw-w-40 tw-h-40  tw-absolute tw-top-[138px] tw-right-10 -tw-mt-20 arrow flex-all-center click" @click="editIndex('add')">
              <el-icon color="#ffffff" size="24">
                <ArrowRight/>
              </el-icon>
            </div>
          <div class="carousel-images "  :style="carouselStyle">
            <div class="image-container flex-column-center click" v-for="(item, index) in data.teacherList" :key="index">
              <div class="item-imgs" style="width: 100%;height: 276px;overflow: hidden;">
                <img class="img-item" :src="item.avatarPicUrl" alt="">
              </div>
              <div class="flex-all-center" style="padding: 14px 0;">
                <span
                    style="margin-right: 10px;font-size: 16px;color: #191921;display: inline-block;white-space: nowrap;">{{ item.name }}</span>
                <span :title="item.teachScopeContent" class="over-hidden"
                      style="font-size: 12px;color: #9598a2;font-weight: 400;max-width: 180px">{{ item.teachScopeContent }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, onBeforeUnmount, onMounted, reactive, ref} from "vue";
// import { listBanner, pagingArticle } from '@/api/home'
import {useRouter} from 'vue-router';
import {listTeacher} from '../../api/home.js'
import {ArrowLeft, ArrowRight} from '@element-plus/icons-vue'

const emit = defineEmits(['clickToNewsMessagePage', 'openExternalLink']);
const bannerCarouselRef = ref();
const router = useRouter();
const data = reactive({
  teacherList: [ ],
  images:[],
  bannerList: [],
})
onMounted(() => {
  initData()
  document.addEventListener('visibilitychange',function(e){
    let state = document.visibilityState
    if (state == 'hidden') {

      stopCarousel();
    }
    if (state == 'visible') {
      startCarousel();
      setTimeout(()=>{
        isTransitioning.value=1
      },100)
    }
  });
})
onBeforeUnmount(() => {
  stopCarousel();
});
const initData = () => {
  listTeacher({}, (res) => {
    data.teacherList =[... res.data.slice(res.data.length-6,-1),...res.data]
    data.teacherList=[...data.teacherList,...data.teacherList]
    startCarousel();
  })
}
const currentIndex = ref(5); // 当前显示的图片索引
let timer = null; // 定时器
const isTransitioning = ref(1); // 控制动画切换
// 计算平移样式
const carouselStyle = computed(() => {
  return {
    transform: `translateX(-${currentIndex.value * 236}px)`,
    transition: `${isTransitioning.value}s`, // 控制是否平滑过渡
  };
});
// 启动轮播
const startCarousel = () => {
  timer = setInterval(() => {
    addImage()
  }, 5000);
};
const addImage = () => {
  currentIndex.value++;
  if (currentIndex.value >= (data.teacherList.length / 2 + 4)) {
    setTimeout(() => {
      currentIndex.value = 4
      isTransitioning.value = 0
      setTimeout(() => {
        isTransitioning.value = 1
      }, 200)
    }, 1000)
  }

}
// 停止轮播
const stopCarousel = () => {
  clearInterval(timer);
};
const editIndex =debounce((type) => {
  stopCarousel()
  if (type == 'add') {
    addImage()

  } else {
    currentIndex.value--;
    if (currentIndex.value <= 4) {
      setTimeout(()=>{
        isTransitioning.value = 0
        currentIndex.value = data.teacherList.length / 2 +4
        setTimeout(() => {

          isTransitioning.value = 1
        }, 200)
      },1000)
    }
  }
  startCarousel()
},1200)
function debounce(func, wait) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, wait);
    }
  };
}

</script>
<style src="../../assets/styles/base.css"></style>
<style lang="scss" scoped>

.carousel-container {
  width: 100%; /* 外层容器宽度 */
  height: auto; /* 外层容器高度 */
  overflow: hidden; /* 隐藏超出部分 */
  position: relative;
}

.carousel-images {
  display: flex; /* 横向排列 */
}

.image-container {
  min-width: 236px;
  height: auto;
}

.img-item {
  width: 100%;
  height: 100%;
  transition: transform 1s ease; /* 鼠标移入放大时的过渡效果 */
}

.img-item:hover{
  transform: scale(1.2); /* 图片放大效果 */
}
.arrow{
  display: none;
  background-color: rgba(0,0,0,.1);
  border-radius: 100%;
  z-index: 999999;

}
.arrow:hover{
  background-color: rgba(0,0,0,.5);
}
.carousel-container:hover .arrow{
  display: flex;
}
</style>
